<template>
	<div class="loading" :class="row ? 'row' : ''">
        <div class="img-block">
             <div class="img"></div>
		     <p class="desc">{{title}}</p>
        </div>
	</div>
</template>

<script type="text/javascript">
export default {
	props: {
		title: {
			type: String,
			default: '正在载入，请稍后...'
		},
		row: {
			type: Boolean,
			default: false
		}
	}
}
</script>

<style type="text/css" lang="scss" scoped>
@import '~styles/variable.scss'; 

@keyframes wating {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -2880px 0;
    }
}
.loading{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    .img-block{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .img{
        width: 48px;
        height: 48px;
        margin: 0 auto;
        background-image: url(../assets/image/loading_24dp.png);
        background-repeat: no-repeat;
        background-size: 2880px 48px;
        animation: wating 1.5s steps(60) infinite;
    }
	.desc{
	    font-size: $font-size-s;
	    color: $color-gray;
	}
}
</style>
